<template>
	<view class="my-settle-container">
		<!-- 全选区域 -->
		<label class="radio">
			<u-checkbox  icon-size="30" size="55" active-color="#ff9000" class="checkAll" v-model="isFullCheck" shape="circle">全选</u-checkbox>
		</label>

		<view class="amount-settle">
			<u-modal :mask-close-able="true" :show-title="false" cancel-text="我在想想" confirm-color="#FF4500" confirm-text="删除" @confirm="confirm" show-cancel-button v-model="show" :content="content"></u-modal>
			<!-- 合计区域 -->
			<view v-show="action" class="amount-box">
				合计:<text class="amount">￥{{checkSum}}</text>
			</view>
			<u-toast style="background-color: #fff;" ref="uToast" />
			<!-- 结算按钮 -->
			<view v-show="action" class="btn-settle" @click="settlement">结算({{checkedCount}})</view>
			<u-tag @click="remove" mode="plain" shape="circle" v-show="!action" text="删除" type="error"/>
		</view>
	</view>
</template>

<script>
	import {mapGetters,mapMutations,mapState} from 'vuex'
	
	export default {
		name: "my-settle",
		props:{
			action:{
				default:true,
			}
		},
		data() {
			return {
				show:false,
				content:`确认要删除吗?`
			};
		},
		computed: {
			...mapGetters('m_cart', ['checkedCount', 'total', 'checkSum','checkedNum']),
			...mapGetters('m_user',['receiptAddress']),
			...mapState('m_user',['token']),
			isFullCheck: {
				get() {
					return this.checkedCount === this.total
				},
				set() {
					this.isAllCheck(!this.isFullCheck)
				}
			}
		},
		methods: {
			confirm(){
				console.log(111)
				this.$emit('removeGoods')
			},
			...mapMutations('m_cart', ['isAllCheck']),
			settlement(){
				if(!this.checkedCount) return this.$refs.uToast.show({
					title: '请选择要结算的商品',
					type: 'info',
					icon:false,
				}) 
				
				this.$emit('gotoOrder')
				// if(!this.receiptAddress) return uni.$showMsg('请选择收货地址')
				
				// if(!this.token) uni.$showMsg('请先登录')
			},
			remove(){
				if(!this.checkedCount) return this.$refs.uToast.show({
					title: '还没有选择商品呢',
					type: 'info',
					icon:false,
				}) 
				this.show = true
				this.content = `确认要删除这${this.checkedNum}件商品吗?`
			}
		}
	}
</script>

<style lang="scss">
	
	.checkAll{
		// background-image: linear-gradient(to right, #ff9000 0, #ff5000 100%);
	}
	.u-checkbox__icon-wrap--circle{
		background-image: linear-gradient(to right, #ff9000 0, #ff5000 100%);
	}
	

	.my-settle-container {
		position: fixed;
		bottom: 50px;
		left: 0;
		width: 100%;
		height: 50px;
		// 将背景色从 cyan 改为 white
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		padding: 0 10px;
		z-index: 10;

		.radio {
			display: flex;
			align-items: center;
		}

		.amount-box {
			padding-right: 10px;
		}

		.amount {
			color: #c00000;
		}

		.amount-settle {
			display: flex;
			align-items: center;
		}

		.btn-settle {
			border-radius: 35px;
			min-width: 100px;
			background-image: linear-gradient(to right, #ff9000 0, #ff5000 100%);
			color: white;
			line-height: 40px;
			text-align: center;
			padding: 0 10px;
		}
	}
</style>
